<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭">
    <div style="margin:0 auto;" :class="{isCheck:isCheck}">
      <a-form-model ref="form" :rules="validatorRules" :model="model">
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td class="column title" colspan="12">基本信息</td>
          </tr>
          <tr>
            <td class="column">标题</td>
            <td class="value" colspan="2">
              <a-form-model-item label="" prop="title">
                <a-input v-model="model.title"
                         :disabled="disableSubmit"></a-input>
              </a-form-model-item>
            </td>
            <td class="column">摘要</td>
            <td class="value" colspan="2">
              <a-form-model-item label="" prop="summary">
                <a-input v-model="model.summary"
                         :disabled="disableSubmit"></a-input>
              </a-form-model-item>
            </td>
            <td class="column">作者</td>
            <td class="value">
              <a-form-model-item label="" prop="author">
                <a-input v-model="model.author"
                         :disabled="disableSubmit"></a-input>
              </a-form-model-item>
            </td>
          </tr>
          <tr>
            <td class="column">出处</td>
            <td class="value" colspan="2">
              <a-form-model-item label="" prop="source">
                <a-input v-model="model.source"
                         :disabled="disableSubmit"></a-input>
              </a-form-model-item>
            </td>
            <td class="column">分类</td>
            <td class="value" colspan="2">
              <a-form-model-item label="" prop="cate">
                <a-tree-select
                  treeDefaultExpandAll
                  v-model="model.cate"
                  style="width: 100%"
                  :tree-data="treeData"
                  tree-checkable
                  :disabled="disableSubmit"
                />
              </a-form-model-item>
            </td>
            <td class="column">首发时间</td>
            <td class="value">
              <a-form-model-item label="" prop="putTime">
                <j-date style='width:100%' v-model='model.putTime' :disabled="disableSubmit"></j-date>
              </a-form-model-item>
            </td>
          <tr>
            <td class="column" colspan="1">附件
            </td>
            <td class="value" colspan="7" style="position: relative">
              <ZUpload :isShow="disableSubmit" ref="fileUpload" :fileid="model.fileId"
                       @uploadFile="uploadFile"></ZUpload>
            </td>
          </tr>
          <tr>
            <td v-if="disableSubmit" style="padding: 10px" class="value" colspan="12">
              <div class="div-html" v-html="model.content"/>
            </td>
            <td v-else style="padding: 10px" class="value" colspan="12">
              <j-editor v-model="model.content"/>
            </td>
          </tr>
        </table>
      </a-form-model>
    </div>
  </j-modal>
</template>
<script>
  import {httpAction, getAction} from '@/api/manage'
  import ZUpload from '../../../components/ZUpload'

  export default {
    name: 'sjzswxModal',
    components: {
      ZUpload
    },
    data() {
      return {
        disableSubmit: false,
        title: '机构信息',
        visible: false,
        isCheck: false,
        model: {},
        url: {
          add: '/sjzszhly/sjKnowledgeLiterature/add',
          edit: '/sjzszhly/sjKnowledgeLiterature/edit',
          tree: '/common/knowledgeCommon/queryAllTypesList'
        },
        treeData: [],
        validatorRules: {
          title: [
            {required: true, message: '输入!'},
          ],
          summary: [
            {required: true, message: '输入!'},
          ],
          author: [
            {required: true, message: '输入!'},
          ],
          source: [
            {required: true, message: '输入!'},
          ],
          cate: [
            {required: true, message: '输入!'},
          ],
          putTime: [
            {required: true, message: '输入!'},
          ]
        },
      }
    },
    created() {
      this.loadTree()
    },
    watch: {},
    methods: {
      add() {
        this.model = {
          content: ''
        }
        this.visible = true
      },
      check(record) {
        this.model = Object.assign({}, record)
        if(this.model.cate) {
          this.model.cate = this.model.cate.split(',');
        }
        this.visible = true
      },
      edit(record) {
        this.model = Object.assign({}, record)
        if(this.model.cate) {
          this.model.cate = this.model.cate.split(',');
        }
        this.visible = true
      },
      close(isSubmit) {
        if (isSubmit) {
          this.saveData()
        } else {
          this.visible = false
        }
      },
      uploadFile(id) {
        let url, type
        if (!this.model.id) {
          url = this.url.add
          type = 'post'
        } else {
          url = this.url.edit
          type = 'put'
        }
        this.model.fileId = id
        this.model.cate = this.model.cate.toString()
        httpAction(url, this.model, type).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('ok');
            this.visible = false
          } else {
            console.log(res)
          }
        })
      },
      saveData() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$refs.fileUpload.saveFile('sjzswx')
          } else {
            return false
          }
        })
      },
      loadTree() {
        this.treeData = []
        getAction(this.url.tree, {type: 2}).then((res) => {
          if (res.success) {
            this.treeData = res.result
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  @import '../../../css/checkAndEdit.less';

  .name-type {
    width: 110px;
    margin-left: 5px;
    border: 1px solid #e0e0e0;

    /deep/ .ant-select-selection {
      box-sizing: border-box;
      min-height: 27px !important;

      .ant-select-selection__rendered {
        line-height: 27px !important;

      }
    }
  }
</style>
